network: Don't use StButtons for items in selector

Their use blocks activation of the default button by keyboard, which
is important for accessibility. Use a Clutter.ClickAction instead,
which doesn't have this problem as it only considers mouse events.

https://bugzilla.gnome.org/show_bug.cgi?id=710144

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 9d7952ac2858790083968e065d2f03ffcb32f91e..a90412ee1444bc803faedde3291db6424e8cde8a 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -306,16 +306,13 @@ StScrollBar StButton#vhandle:active {
     font-size: 12pt;
     border-bottom: 1px solid #666;
     padding: 12px;
+    spacing: 20px;
 }
 
-.nm-dialog-item:checked {
+.nm-dialog-item:selected {
     background-color: #333;
 }
 
-.nm-dialog-item-box {
-    spacing: 20px;
-}
-
 .nm-dialog-icons {
     spacing: .5em;
 }

diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index fdd95a755d42bc4b6a3097b9db2e1dac6c8449ab..1df01b6919f8b031e0e726f2a14287d4777a88c7 100644 (file)
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -549,31 +549,30 @@ const NMWirelessDialogItem = new Lang.Class({
         this._network = network;
         this._ap = network.accessPoints[0];
 
-        this.actor = new St.Button({ style_class: 'nm-dialog-item',
-                                     can_focus: true,
-                                     x_fill: true });
+        this.actor = new St.BoxLayout({ style_class: 'nm-dialog-item',
+                                        can_focus: true,
+                                        reactive: true });
         this.actor.connect('key-focus-in', Lang.bind(this, function() {
             this.emit('selected');
         }));
-        this.actor.connect('clicked', Lang.bind(this, function() {
+        let action = new Clutter.ClickAction();
+        action.connect('clicked', Lang.bind(this, function() {
             this.actor.grab_key_focus();
         }));
-
-        this._content = new St.BoxLayout({ style_class: 'nm-dialog-item-box' });
-        this.actor.set_child(this._content);
+        this.actor.add_action(action);
 
         let title = ssidToLabel(this._ap.get_ssid());
         this._label = new St.Label({ text: title });
 
         this.actor.label_actor = this._label;
-        this._content.add(this._label, { x_align: St.Align.START });
+        this.actor.add(this._label, { x_align: St.Align.START });
 
         this._selectedIcon = new St.Icon({ style_class: 'nm-dialog-icon',
                                            icon_name: 'object-select-symbolic' });
-        this._content.add(this._selectedIcon);
+        this.actor.add(this._selectedIcon);
 
         this._icons = new St.BoxLayout({ style_class: 'nm-dialog-icons' });
-        this._content.add(this._icons, { expand: true, x_fill: false, x_align: St.Align.END });
+        this.actor.add(this._icons, { expand: true, x_fill: false, x_align: St.Align.END });
 
         this._secureIcon = new St.Icon({ style_class: 'nm-dialog-icon' });
         if (this._ap._secType != NMAccessPointSecurity.NONE)
@@ -956,13 +955,13 @@ const NMWirelessDialog = new Lang.Class({
 
     _selectNetwork: function(network) {
         if (this._selectedNetwork)
-            this._selectedNetwork.item.actor.checked = false;
+            this._selectedNetwork.item.actor.remove_style_pseudo_class('selected');
 
         this._selectedNetwork = network;
         this._updateSensitivity();
 
         if (this._selectedNetwork)
-            this._selectedNetwork.item.actor.checked = true;
+            this._selectedNetwork.item.actor.add_style_pseudo_class('selected');
     },
 
     _createNetworkItem: function(network) {